<template>
	<up-card v-for="prod in product" :show-head="false" :show-foot="false">
		<template #body>
			<view class="product-its">
				<view class="pro-img">
					<up-image :src="prod.image" mode="widFix" width="120rpx" height="120rpx"></up-image>
				</view>
				<view class="pro-its">
					<view class="pro-name">
						{{ prod.name }}
					</view>
					<view class="pro-pri">
						<view class="prices">
							<text class="prices-unit">￥</text>
							<text class="prices-money">{{ prod.price }}</text>
						</view>
						<view class="pay-btn">
							<up-button type="primary" text="立即购买" shape="circle" @tap="rechargeTabs(prod.id)"
		 size="small"></up-button>
						</view>
					</view>
				</view>
			</view>
		</template>
	</up-card>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getQuery
	} from '@/utils/common';
	import {
		reactive
	} from "vue";
	import {
		empty
	} from "../../uni_modules/uview-plus/libs/function/test";
	import {
		packLst
	} from "../../utils/api/api";

	const product = reactive([])

	onShow(() => {
		let query = getQuery()
		if (query.opeions?.openid) {
			uni.setStorageSync("openid", query.options.openid)
		}
		packLst().then(res => {
			// console.log(res)
			product.splice(0, product.length, ...res.result)
		})
	})
	
	const rechargeTabs = id=>{
		uni.navigateTo({
			url: "/pages/index/index?id="+id
		})
	}
</script>

<style lang="scss">
	.product-its {
		display: flex;
		width: 100%;

		.pro-img {
			width: 120rpx;
			flex-basis: 120rpx;
			margin-right: 20rpx;
			border-radius: 16rpx;
			height: 120rpx;
			overflow: hidden;
		}

		.pro-its {
			width: calc(100% - 140rpx);
			flex-basis: calc(100% - 140rpx);
			line-height: 1.7;

			.pro-name {
				font-weight: 600;
			}

			.pro-pri {
				display: flex;
				width: 100%;
				justify-content: space-between;
				justify-items: self-start;
				align-items: center;

				.pay-btn {
					width: 180rpx;
				}
			}
		}
	}
</style>